<script setup>
import {onMounted, ref} from "vue";
import { http } from "@/api";
import { ElMessage } from "element-plus";
const formRef1 = ref(null)
const formData1 = ref({
  // 本周日均发电量 (kWh)
  week_power: 0,
  // 今日预测发电量 (kWh)
  today_power: 0,
  // 今日实际发电量 (kWh)
  today_actual_power: 0,
  // 装机容量 (kWh)
  installed_capacity: 0,
  // 准确率
  accuracy: 0,
  // 昨日预测发电量 (kWh)
  yesterday_power: 0,
  // 昨日实际发电量 (kWh)
  yesterday_actual_power: 0,
})
const rules1 = ref({
  week_power: [
    { required: true, message: '请输入本周日均发电量', trigger: 'blur' }
  ],
  today_power: [
    { required: true, message: '请输入今日预测发电量', trigger: 'blur' }
  ],
  today_actual_power: [
    { required: true, message: '请输入今日实际发电量', trigger: 'blur' }
  ],
  installed_capacity: [
    { required: true, message: '请输入装机容量', trigger: 'blur' }
  ],
  accuracy: [
    { required: true, message: '请输入准确率', trigger: 'blur' }
  ],
  yesterday_power: [
    { required: true, message: '请输入昨日预测发电量', trigger: 'blur' }
  ],
  yesterday_actual_power: [
    { required: true, message: '请输入昨日实际发电量', trigger: 'blur' }
  ],
})
const itemList = ref([])
const submit1 = () => {
  formRef1.value.validate((valid) => {
    if (valid) {
      http.pvForecastRel.update(formData1.value).then(res => {
        ElMessage.success(res.msg)
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

onMounted(() => {
  http.pvForecastRel.list().then(res => {
    itemList.value = res.data
    const obj = {}
    res.data.forEach(item => {
      obj[item.code] = item.value
    })
    for (const formData1Key in formData1.value) {
      if (formData1.value.hasOwnProperty(formData1Key)) {
        formData1.value[formData1Key] = obj[formData1Key]
      }
    }
  })
})
import RelTimeLine from "./real-time-line.vue";
import DayLine from "./day-line.vue";
</script>

<template>
  <div class="data-container">
    <el-card shadow="never" style="margin-bottom: 20px">
      <template #header>
        <div class="card-header">
          <span>基础数据</span>
        </div>
      </template>
      <el-form :model="formData1" :rules="rules1" ref="formRef1" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in itemList">
            <el-form-item :label="item.description + '（' + item.unit +'）'" :prop="item.code" :rules="rules1[item.code]">
              <el-input v-model="formData1[item.code]"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item >
          <div style="text-align: center;width: 100%">

            <el-button type="primary" @click="submit1">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <RelTimeLine />
    <DayLine />
  </div>
</template>

<style scoped lang="scss">

</style>